<template>
  <div class="antv-chart-mini">
    <div class="chart-wrapper" :style="{ height: 46 }">
      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
        <v-tooltip />
        <v-bar position="x*y" />
      </v-chart>
    </div>
  </div>
</template>

<script>
// import moment from 'moment'
// const data = []
// const beginDay = new Date().getTime()

// for (let i = 0; i < 10; i++) {
//   data.push({
//     x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
//     y: Math.round(Math.random() * 10)
//   })
// }

// const tooltip = [
//   'x*y',
//   (x, y) => ({
//     name: x,
//     value: y
//   })
// ]

// const scale = [{
//   dataKey: 'x',
//   min: 2
// }, {
//   dataKey: 'y',
//   title: '时间',
//   min: 1,
//   max: 30
// }]

export default {
  name: 'MiniBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    scale: {
      type: Array,
      default: () => {
        return [{
          dataKey: 'x',
          min: 2
        }, {
          dataKey: 'y',
          title: '时间',
          min: 1,
          max: 31
        }]
      }
    }
    // tooltip: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       'x*y',
    //       (x, y) => ({
    //         name: x,
    //         value: y
    //       })
    //     ]
    //   }
    // }
  },
  data () {
    return {
      height: 100
    }
  }
}
</script>

<style lang="less" scoped>
  @import "chart";
</style>
